<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
    <title>Matrix Template - The Ultimate Multipurpose admin template</title>
    <!-- Custom CSS -->
    <link href="../../dist/css/style.min.css" rel="stylesheet">
    <style>
        .page-wrapper>.container-fluid {
            padding: 20px;
            min-height: 100vh ;
        }
        .mf-card{
            position: relative;
        }
        .mf-card .card-title{
            position: absolute;
            left: calc(50% - 25px);
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align:center;
            border-radius: 50%;
        }
        .mf-content{
            margin-top: 68px;
        }
    </style>
</head>

<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
    <div class="lds-ripple">
        <div class="lds-pos"></div>
        <div class="lds-pos"></div>
    </div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card card-hover">
                        <div class="card-body mf-card">
                            <h5 class="card-title btn-warning">One</h5>
                            <div class="row mf-content">
                                <div class="col-md-3">
                                   <p class="badge badge-info">KJ-DAS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">KJ-DCS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">KJ-AS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">KJ-DBP</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">DL-DAS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">DL-DAS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">DL-DAS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">DL-DAS</p>
                                </div>
                                <div class="col-md-3">
                                    <p class="badge badge-info">DL-DAS</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">One third width</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">One third width</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">One third width</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../../assets/libs/jquery/dist/jquery.min.js"></script>

<script>
    $(function () {
        $(".preloader").fadeOut();
        $(".page-wrapper").delay(20).show();
    });
</script>
</body>

</html>